import React, { useState } from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
  state = {
    count: 100
  }
  add = () => {
    // this.state.count += 10
    // setState 更新数据大部分情况下是一个异步操作
    // 原生DOM的事件绑定中 setState是同步的
    // this.setState({}) 可以触发视图的更新
    // this.state.count += 10;
    // this.setState({
    //   count: this.state.count + 10
    // })
    // this.setState({})
    // console.log(this.state.count)
    this.setState({
      count: this.state.count + 10
    })
    console.log(1, this.state.count)
    this.setState({
      count: this.state.count + 10
    })
    console.log(2, this.state.count)
    this.setState({
      count: this.state.count + 10
    })
    console.log(3, this.state.count)
    this.setState({
      count: this.state.count + 10
    })
    console.log(4, this.state.count)
  }
  add2 = () => {
    this.setState({
      count: this.state.count + 100 //200
    }, () => {
      // 数据更新之后执行
      console.log(1, this.state.count)
    })
    this.setState({
      count: this.state.count + 100 // 200
    }, () => {
      // 数据更新之后执行
      console.log(2, this.state.count)
    })
    this.setState({
      count: this.state.count + 100 // 200
    }, () => {
      // 数据更新之后执行
      console.log(3, this.state.count)
    })
    //视图上 100 200 400 ??
  }
  render() {
    let { count } = this.state;
    return <div className=''>
      <h1>{count}</h1>
      <button onClick={this.add}>+</button>
      <button onClick={this.add2}>+100</button>
    </div>;
  }
}

// hooks 是react对函数式组件做的加强 
// 规则 1 只能用在函数式组件中； 2  只能应用在最顶层作用域
function App2() {
  // let count = 100;
  // 使用useState返回的哪个回调函数的时候  需要注意的是 他的作用是替换不是合并

  let [count, setCount] = useState(100)
  let [obj, setObj] = useState({
    name: "珠峰",
    age: 100
  })
  function add() {
    setCount(count + 100)
    // console.log(count)
    setObj({
      ...obj,
      name: "6666"
    })
  }
  return <div>
    <h1>{count}{obj.name}---{obj.age}</h1>
    <button onClick={add}>+</button>
  </div>
}

ReactDOM.render(<App2 />, document.getElementById('root'))